<template>
  <div class="field-contrast-config">
    <table>
      <tr>
        <td/>
        <td style="text-align: left">{{ sourceFormDefinition.formName }}</td>
        <td/>
        <td style="text-align: left">{{ targetFormDefinition.formName }}</td>
        <td/>
      </tr>
      <tr class="field-contrast-config-item" v-for="(item, index) in innerValue">
        <td class="field-contrast-config-item-left-button">
          <slot name="leftButton" :fieldContrast="item" :index="index"/>
        </td>
        <td class="field-contrast-config-item-left">
          <a-select style="width: 100%" :value="item.sourceFieldId" @change="v => souceFieldChange(item, v)" allowClear
                    placeholder="请选择字段">
            <a-select-option v-for="item in getLeftFieldOptions(index)" :value="item.id" :key="item.id">
              {{ item.title }}
            </a-select-option>
          </a-select>
        </td>
        <td class="field-contrast-config-item-center">
          <span class="iconfont">&#xea8a;</span>
        </td>
        <td class="field-contrast-config-item-right">
          <a-select style="width: 100%" v-model="item.targetFieldId" @change="v => targetFieldChange(item, v)"
                    allowClear placeholder="请选择字段">
            <a-select-option v-for="item in getRightFieldOptions(index)" :value="item.id" :key="item.id">
              {{ item.title }}
            </a-select-option>
          </a-select>
        </td>
        <td class="field-contrast-config-item-right-button">
          <div style="display: flex; align-items: center; justify-content: space-evenly">
            <slot name="rightButton" :fieldContrast="item" :index="index"/>
            <a-button icon="plus" size="small" shape="circle" @click="() => addNew(index)"/>
            <a-button icon="minus" size="small" shape="circle" @click="() => remove(index)"/>
          </div>
        </td>
      </tr>

    </table>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition, fieldCanMapping, getAllFields} from '@comp/hhd/design/FormDesigner/types';
import {createFieldBinds} from '@comp/hhd/design/relation/types';
import {getFieldConfigById, getFormIdByFieldId} from '@/utils/FormDesignUtils';

export default {
  name: 'FieldContrastConfig',
  model: createModelForVue(),
  props: {
    sourceFormDefinition: createProps(Object, createFormDefinition),
    targetFormDefinition: createProps(Object, createFormDefinition),
    value: createProps(Array, undefined),
    includeTargetForms: createProps(String),
    excludeSourceForms: createProps(Array, undefined),
  },
  methods: {
    change(v) {
      this.$emit('change', v);
    },
    remove(index) {
      this.value.splice(index, 1);
      this.$nextTick(() => this.$emit('removed'));
    },
    targetFieldChange(item, fieldId) {
      item.targetFormId = getFormIdByFieldId(fieldId, this.targetFormDefinition);
    },
    souceFieldChange(item, fieldId) {
      let fieldConfig = fieldId && getFieldConfigById(fieldId, this.sourceFormDefinition) || undefined;
      if (fieldConfig) {
        item.sourceFormId = fieldConfig.formId;
        item.sourceFieldId = fieldId;
      } else {
        item.sourceFormId = undefined;
        item.sourceFieldId = undefined;
      }
      this.$nextTick(() => this.$emit('leftChange'));
    },
    addNew(index) {
      this.value.splice(index + 1, 0, this.buildFieldMapping());
    },
    getLeftFieldOptions(index) {
      let res = getAllFields(this.sourceFormDefinition);
      let item = this.innerValue[index];
      if (!item) return [];
      res = res.filter(field => {
        let fieldId = field.id, formId = field.formId;

        //过滤掉左边其他行选中的字段
        let tempIndex = this.leftSelectedFieldIds.indexOf(fieldId);
        if (tempIndex >= 0 && tempIndex !== index) return false;

        //只找到左边其他行选中的表单里面的字段(得剔除自己选中的表单)
        let list = [...this.leftSelectedFormIds];
        list.splice(index, 1);
        list = list.filter(f => !!f);
        if (list.length && !list.includes(formId)) return false;

        //过滤掉特殊的表单下的字段
        if (this.excludeSourceForms && this.excludeSourceForms.includes(formId)) return false;

        //根据右边的字段过滤一下
        if (item.targetFieldId) {
          let rightFieldConfig = getFieldConfigById(item.targetFieldId, this.targetFormDefinition);
          if (!rightFieldConfig) return false;
          return fieldCanMapping(field, rightFieldConfig);
        }

        return true;
      });

      return res;
    },
    getRightFieldOptions(index) {
      if (!this.value || !this.value[index]) return [];
      let item = this.value[index];
      let res = getAllFields(this.targetFormDefinition, this.includeTargetForms && this.includeTargetForms.split(',') || []);
      res = res.filter(targetField => {
        if (!item.sourceFieldId) return true;

        let sourceField = getFieldConfigById(item.sourceFieldId, this.sourceFormDefinition);

        if (!sourceField) return false;

        return fieldCanMapping(sourceField, targetField);
      });
      return res;
    },
    buildFieldMapping() {
      return createFieldBinds();
    },
  },
  computed: {
    leftSelectedFieldIds() {
      return this.innerValue.map(f => f.sourceFieldId);
    },
    leftSelectedFormIds() {
      return this.innerValue.map(f => f.sourceFormId);
    },
    innerValue: {
      get() {
        let res = this.value;
        if (!res) {
          this.change(res = [this.buildFieldMapping()]);
        }
        if (!res.length) {
          res.push(this.buildFieldMapping());
        }
        return res;
      },
      set(v) {
        this.change(v);
      },
    }
  }
};
</script>
<style>
.field-contrast-config table {
  width: 100%;
}

.field-contrast-config table td {
  text-align: center;
  padding-bottom: 5px;
}

.field-contrast-config {

}

.field-contrast-config-item .field-contrast-config-item-left,
.field-contrast-config-item .field-contrast-config-item-right {
  width: 500px;
}

.field-contrast-config-item {
}

.field-contrast-config-item-center {
  width: 20px;
}

.field-contrast-config-item-center .iconfont {
  color: #b6b6b6;
  font-size: 25px;
  padding: 0 10px;
}

.field-contrast-config-item-right-button,
.field-contrast-config-item-left-button {
  width: fit-content;
}

</style>